<template>
  <div>
        <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      left-arrow
      title="我的收藏"
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- 列表模块 -->
     <div class="news">
      <van-list
        v-model="loading"
       :finished="finished"
       finished-text="没有更多了"
       @load="onLoad"
      >
    <!-- <van-cell  v-for="(item,index) in list" :key="index" > 
        <van-row style="border-bottom: 1px solid #ccc; ">
          <van-col span="10" style="padding: 0 15px 0 0">
            <van-image
              width="100%"
              height="100%"
              :src="`http://122.51.249.55:8080${item.houseImg}`"
            />
          </van-col>
          <van-col span="14"
            ><p>{{item.title}}</p>
            <span class="address">{{item.desc}}</span>
            <span class="tip">{{item.tags[0]}}</span>
            <i>{{item.price}} 元/月</i>
          </van-col>
        </van-row>
        </van-cell> -->
        <house-item :list='list' />
      </van-list>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {getUserFavorites} from '@/api/user'
import houseItem from '../findHouse/components/housesItem.vue'
export default {
  name: 'HospitalityRental1MasterIndex',
components: {
  houseItem,
},
  data() {
    return {
      list:[],
      loading: false,
      finished: false,
    };
  },
computed: {
    ...mapState(["user"])
  },
  mounted() {
    
  },

  methods: {
  async onLoad() {
      if(this.user) {
      const {body} =  await getUserFavorites()
      this.list.push(...body)
      this.loading = false
     
       this.finished = true;
    } else {
      this.$router.replace('/login')
    }
} 
  },
};
</script>

<style lang="less" scoped>

  .news {
    // padding: 0 60px 0px 20px;
    margin-bottom: 20px;
    background-color: #fff;
    p {
      padding: 0;
      margin: 0;
      // line-height: 50px;
      font-size: 25px;
      color: #333;
    }
    .address {
      display: block;
      font-size: 24px;
      color: #9c9fa1;
    }
    .tip {
      display: inline-block;
      font-size: 12px;
      background-color: #e1f5f8;
      color: #4fc5d2;
    }
    i {
      display: block;
      color: #fa5749;
      font-style: normal;
    }
  }
</style>